<template>
  <div class="editor-container">
    <shape v-for="com in comps" :key="com.id"
           class="shape-container"
           :active="curComponentId === com.id"
           :element="com"
           :style="getShapeStyle(com)"
           @EmitContextMenu="EmitContextMenu">
      <transition :enter-active-class="com.animate.enterAnimation"
                  :leave-active-class="com.animate.leaveAnimation">
        <component
            class="component"
            :key="com.id"
            :com="com"
            :is="com.name"
            :propValue="com.propValue"
            :element="com"
            :location="com.id"
        />
      </transition>
    </shape>
    <context-menu :menuTop="menuTop" :menuLeft="menuLeft"
                  :menuShow="menuShow"
                  @hideMenu="hideMenu"
                  :scale="menuScale"
                  :editName="false"></context-menu>
<!--        <mark-line></mark-line>-->
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import Shape from "./shape.vue";
import { useStore } from "vuex";
import MarkLine from "./mark-line.vue";
import { off, on } from "../../../../../utils/event";
import ContextMenu from "../../../../../components/functional/context-menu/context-menu.vue";

export default defineComponent({
  name: "main-editor",
  components: { MarkLine, Shape, ContextMenu },
  setup() {
    const store = useStore();
    const comps = computed(() => store.state.design.components);
    const selectComp = computed(() => store.getters["design/selectedComp"]);
    const curComponentId = computed(() => {
      if (selectComp.value) {
        return selectComp.value.id;
      }
    });
    const menuTop = ref(null);
    const menuLeft = ref(null);
    const menuShow = ref(false);
    const scale = computed(() => {
      return store.state.design.canvas.scale || 1;
    });
    const menuScale = computed(() => {
      return 1 / scale.value;
    });
    const getShapeStyle = (com) => {
      return {
        width: `${com.attr.w}px`,
        height: `${com.attr.h}px`,
        top: "0px",
        left: "0px",
        transform: `translate(${com.attr.x}px, ${com.attr.y}px)`
      };
    };
    const EmitContextMenu = (e, comp) => {
      e.stopPropagation();
      e.preventDefault();
      // 计算菜单相对于编辑器的位移
      let target = e.target;
      let top = e.offsetY + comp.attr.y;
      let left = e.offsetX + comp.attr.x;
      while (!target.className.includes("editor")) {
        left += target.offsetLeft;
        top += target.offsetTop;
        target = target.parentNode;
      }
      menuLeft.value = left;
      menuTop.value = top;
      menuShow.value = true;
      on(document, "click", hideMenu);
    };
    const hideMenu = () => {
      off(document, "click", hideMenu);
      menuShow.value = false;
    };
    return {
      comps,
      getShapeStyle,
      curComponentId,
      scale,
      menuTop,
      menuLeft,
      menuShow,
      menuScale,
      hideMenu,
      EmitContextMenu
    };
  }
});
</script>

<style scoped>
.component {
  position: absolute;
}
</style>
